<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{{message}}</div>
        <button></button>
    </div>
    <template id="coma">
      <div>
        <h2>我是coma组件{{message}}</h2>
        <button @click="changem">点击</button>
      </div>
    </template>
    <script>
        // 生命周期：
        // 一、初始化加载 二、更新 三、销毁
        // 8个生命周期

        /* 
                                    beforeCreate()
                                    初始化阶段，应用不多

                                    created()
                                    在实例创建完成后被立即调用，该阶段完成了对 data 中的数据的 observer，该阶段可以处理一些异步任务

                                    挂载阶段
                                    beforeMount()
                                    在挂载开始之前被调用，应用不多

                                    mounted()
                                    该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了 $el 属性，该阶段可以通过 DOM 操作来对组件内部元素进行处理了

                                    更新阶段
                                    beforeUpdate()
                                    数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态

                                    updated()
                                    由于数据的变更导致的视图重新渲染，可以通过 DOM 操作来获取视图的最新状态

                                    卸载阶段
                                    beforeDestroy()
                                    实例销毁之前调用，移除一些不必要的冗余数据，比如定时器

                                    destroyed()
                                    Vue 实例销毁后调用
                                */
        /* 
                                 created()
                                 mounted()
                                 beforeDestroy() : 需要销毁和实例有关的操作
                                */

        // 组件嵌套的生命周期执行顺序 ,先执行内层 在执行外层生命周期 ，像洋葱模型
        let ComA = {
            template: "#coma",
            data() {
                return {
                    message: "子组件",
                };
            },
        };

        new Vue({
            el: "#app",
            components: {
                ComA,
            },
            data: {
                message: "实例化",
            },
            beforeCreate() {
                console.log("beforeCreate");
            },
            created() {
                console.log("created");
            },
            beforeMount() {
                console.log("beforeMount");
            },
            mounted() {
                console.log("mounted");
            },
            deforeUpdate() {
                console.log("beforeUpdeta");
            },
            Updeted() {
                console.log("Updated");
            },
        });
    </script>
</body>

</html>